import ProCard from "@ant-design/pro-card";
import {Row, Statistic} from "antd";
import Col from "antd/es/grid/col";
import CountUp from 'react-countup';
import {FormatConfig} from "antd/es/statistic/utils";
import * as React from "react";
import {DataStatisticProps} from "@/pages/system/tool/requestLog/list/Stateless/components/DataStatistic/interfaces";

const formatter: React.ReactNode = (value: number, config?: FormatConfig) => <CountUp end={value} separator=","/>;
export default (props: DataStatisticProps) => {

  return (
    <div style={{padding: "0 5px 5px 5px"}}>
      <Row gutter={16}>
        <Col style={{padding: "5px", borderRadius: "25px",overflow:"hidden"}} span={12}>
          <ProCard size={"small"} bodyStyle={{padding: "5px"}}>
            {/*// @ts-ignore*/}
            <Statistic precision={2} title="平均响应时间" value={props.responseTime} formatter={formatter}/>
          </ProCard>
        </Col>
        <Col style={{padding: "5px", borderRadius: "25px",overflow:"hidden"}} span={12}>
          <ProCard size={"small"} bodyStyle={{padding: "5px"}}>
            {/*// @ts-ignore*/}
            <Statistic title="最近一小时请求次数" value={props.recentHourNum} precision={2} formatter={formatter}/>
          </ProCard>
        </Col>
      </Row>
      <Row gutter={16}>
      <Col style={{padding: "5px", borderRadius: "25px",overflow:"hidden"}} span={12}>
          <ProCard size={"small"} bodyStyle={{padding: "5px"}}>
            {/*// @ts-ignore*/}
            <Statistic title="当天请求次数" value={props.todayNum} formatter={formatter}/>
          </ProCard>
        </Col>
        <Col style={{padding: "5px", borderRadius: "25px",overflow:"hidden"}} span={12}>
          <ProCard size={"small"} bodyStyle={{padding: "5px"}}>
            {/*// @ts-ignore*/}
            <Statistic title="当天失败请求次数" value={props.todayErrorNum} precision={2} formatter={formatter}/>
          </ProCard>
        </Col>
      </Row>
      <Row gutter={16}>
      <Col style={{padding: "5px", borderRadius: "25px",overflow:"hidden"}} span={12}>
          <ProCard size={"small"} bodyStyle={{padding: "5px"}}>
            {/*// @ts-ignore*/}
            <Statistic title="系统负荷" value={props.systemLoad} formatter={formatter}/>
          </ProCard>
        </Col>
        <Col style={{padding: "5px", borderRadius: "25px",overflow:"hidden"}} span={12}>
          <ProCard size={"small"} bodyStyle={{padding: "5px"}}>
            {/*// @ts-ignore*/}
            <Statistic title="每秒平均请求次数" value={props.secondNum} precision={2} formatter={formatter}/>
          </ProCard>
        </Col>
      </Row>
    </div>
  )
}
